這次要介紹的好東東是 孟偉 主講的 material-ui

https://www.youtube.com/watch?v=o84uMfOsso4

在reactjs中只要把元件引入就可以使用很漂亮,也很直覺使用起來也滿好上手的很推薦大家使用

http://www.material-ui.com/#/ 官方網站

直接安裝即可服用,但是react universal 的時候要注意後端與前端的差異後端必須還要加入

...
  global.navigator.userAgent = req.headers['user-agent'] || 'all';
...

才能work 是要很注意的小地方
使用方法步驟

npm install material-ui

記得要安裝這個套件並引用 這個是改善 使用者體驗的套件

import injectTapEventPlugin from 'react-tap-event-plugin';

這邊要注意的是要把布景主題MuiThemeProvider包在外層

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

接下來使用 套件使用方法就簡單了 直接官網看範例看要用哪些套件引入即可都包成compenent了非常的方便

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const MyAwesomeReactComponent = () => (
  <RaisedButton label="Default" />
);

export default MyAwesomeReactComponent;

最後還有提到兩個套件
react-flexbox-grid 目前在server-render會有些問題

這個是做分頁用的好東東
react-ultimate-pagination-material-ui

這邊也再額外再介紹罡北 的 pure css 跟 動畫 很讚的教學

https://www.youtube.com/watch?v=Sxe_fwtCSrY